<template>
  <div class="customer p25">
    <div class="selects mb25">
      <gl-select @change="getList(1)"
                 placeholder="请选择业务员"
                 v-model="salesman"
                 :options="salesmanList"
                 clearable></gl-select>
      <gl-select @change="getList(1)"
                 placeholder="请选择状态"
                 v-model="status"
                 :options="states"
                 clearable></gl-select>
      <el-input clearable v-model="search" placeholder="请输入客户名称" class="w20 ml25"></el-input>
      <el-button type="primary" icon="el-icon-search" class="ml20" @click="getList(1)"> 搜 索</el-button>
      <el-button type="primary" icon="el-icon-plus" class="ml10" @click="visibleDialog = true"> 新 建</el-button>
    </div>
    <gl-table :data="list" :columns="columns" class="table"
              @sort-change="sortChange"
              @button="toDetails">
    </gl-table>
    <gl-pagination :total="total" :curr="curr" :size="limits" @callback="paginationChange"></gl-pagination>
    <el-dialog width="" title="新建客户" :visible.sync="visibleDialog">
      <div class="df-title">基本信息</div>
      <gl-form class=""
               ref="infoRef"
               must="name,rate_name,con_name,tel,bus_id"
               :form="info" :form-label="infoLabel"></gl-form>
      <div class="df-title">登录信息</div>
      <gl-form class=""
               ref="loginRef"
               must="username,password,repassword"
               :form="login" :form-label="loginLabel"></gl-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visibleDialog = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: "Customer",
    computed: {
      ...mapGetters(['userInfo'])
    },
    data() {
      return {
        salesmanList: [],
        salesman: '',
        states: [
          {name: '启用', id: 1},
          {name: '禁用', id: 2},
        ],
        status: '',
        search: '',

        list: [],
        columns: [
          {label: '登录帐号', prop: 'username'},
          {label: '客户名称', prop: 'name'},
          {label: '联系人', prop: 'con_name', format: (val, ind, row) => `${val}(${row.tel})`},
          {label: '产品数量', prop: 'product_num', sortable: 'custom', format: val => this.tools.moneyNumber(val)},
          {label: '结款总额', prop: 'total', sortable: 'custom', format: val => this.tools.moneyNumber(val, 2)},
          {label: '业务员', prop: 'bus_name'},
          {label: '状态', prop: 'status'},
          {label: '操作', btns: ['详情'], width: '80px'},
        ],
        total: 0,
        curr: 1,
        limits: 10,
        order: 0,
        orderArr: {},

        visibleDialog: false,
        info: {},
        infoLabel: [
          {label: '客户简称:', prop: 'name'},
          {label: '公司名称:', prop: 'rate_name'},
          {label: '客户类型:', prop: 'type_id', options: [], labelKey: 'name', valueKey: 'id'},
          {label: '公司地址:', prop: 'address'},
          {label: '联系人:', prop: 'con_name'},
          {label: '联系方式:', prop: 'tel'},
          {label: '业务员:', prop: 'bus_id', options: [], labelKey: 'name', valueKey: 'id'},
          {label: '描述:', prop: 'remark', rows: 3, text: 'ueditor'},
        ],
        login: {},
        loginLabel: [
          {label: '登录账号:', prop: 'username'},
          {label: '登录密码:', prop: 'password'},
          {label: '确认密码:', prop: 'repassword'},
        ],
      };
    },
    watch: {
      visibleDialog(val) {
        if (val) {
          this.getTypeList();
        } else {
          this.$refs.infoRef.resetFields();
          this.$refs.loginRef.resetFields();
        }
      },
    },
    created() {
      let info = {}, login = {};
      this.infoLabel.map(e => {
        info[e.prop] = '';
      });
      this.loginLabel.map(e => {
        login[e.prop] = '';
      });

      let orderValue = 0;
      this.columns.map(e => {
        if (e.sortable) {
          this.orderArr[e.prop + 'ascending'] = ++orderValue;
          this.orderArr[e.prop + 'descending'] = ++orderValue;
        }
      });

      this.info = info;
      this.login = login;
      this.getList(true);
      this.getSalesmanList();
    },
    methods: {
      paginationChange({curr, size}) {
        this.curr = curr;
        this.limits = size;
        this.getList();
      },
      getList(init) {
        let {status, salesman, search, limits, order} = this;
        if (init) {
          this.curr = 1;
        }
        this.http.$post('admin2/customer.api/list_customer', {
          bus_id: salesman,
          company_id: this.userInfo.company_id,
          order,
          status,
          keyword: search,
          curr: this.curr,
          limits,
        }, {
          loading: true
        }).then(res => {
          this.list = res.list;
          this.total = res.total;
        }).catch(this.$err);
      },
      getSalesmanList() {
        this.http.$post('admin/salesman.Api/customer_salesman_lists', {
          status: 1,
          company_id: this.userInfo.company_id,
        }).then(res => {
          this.salesmanList = res;
          let item = this.infoLabel.find(e => e.prop === 'bus_id');
          item && (item.options = res);
        }).catch(console.log);
      },
      toDetails({row}) {
        this.$router.push({
          name: 'CustomerDetails',
          params: {
            id: row.id,
          }
        });
      },
      sortChange(e, prop, type) {
        this.order = this.orderArr[prop + type] || 0;
        this.getList();
      },
      getTypeList() {
        let list = this.infoLabel.find(e => e.prop === 'type_id');
        if (list && list.options && !list.options.length) {
          this.http.$post('admin2/customer_type.Api/customer_type_all_list').then(res => {
            list.options = res;
          }).catch(console.log);
        }
      },
      add() {
        let passInfo = this.$refs.infoRef.validate();
        let passLogin = this.$refs.loginRef.validate();
        if (!passInfo || !passLogin) return;
        this.http.$post('admin2/customer.api/save_customer', {
          ...this.info,
          ...this.login,
        }).then(res => {
          this.$message.success('添加成功');
          this.getList();
          setTimeout(() => {
            this.visibleDialog = false;
          }, 1000);
        }).catch(this.$err);
      },
    },
  }
</script>

<style scoped lang="less">
  .customer {
    background-color: #fff;
  }

  .df-title {
    margin-bottom: 10px;
    padding-left: 15px;
    color: #333;
    font-weight: bold;
    border-left: 5px solid #409EFF;
    line-height: 30px;
  }
</style>